<template>
	<div class="wrap">
		<v-Model v-show="flag"></v-Model>
    	<mt-header title="注册" :fixed="true">
		  <img src="../../assets/nav_back.png" @click="back"  slot="left"  style="width: 0.4rem;margin-left: 0.4rem;"/>
		</mt-header>
    	<v-Content>
	        <div class="list">
	            <span>用户名</span>
	            <input style="width:7rem" type="text" maxlength="15" v-model='userName' placeholder='请设置用户名' @keyup='isuserNameClean'>
	            <img src="../../assets/icon_clean.png" class="rIcon" v-show="isuserName" @click='cleanuserName' alt="">
	        </div>
	
	        <div class="list">
	            <span>登录密码</span>
	            <input v-if='ispassword1' type="password" maxlength="16" v-model='password1' placeholder='6-16位数字和字母组成' @keyup='isCleanShow1'>
	            <input v-if='!ispassword1' type="text" maxlength="16" v-model='password1' placeholder='6-16位数字和字母组成' @keyup='isCleanShow1'>
	            <img src="../../assets/icon_clean.png" v-show="passShow1" @click='isClean1' alt="">
	            <img class="rIcon" :src="passwordSrc1" alt="" @click='checkTpye1'>
	        </div>
	        <div class="list">
	            <span>确认密码</span>
	            <input v-if='ispassword2' type="password" maxlength="16" v-model='password2' placeholder='再次输入登录密码' @keyup='isCleanShow2'>
	            <input v-if='!ispassword2' type="text" maxlength="16" v-model='password2' placeholder='再次输入登录密码' @keyup='isCleanShow2'>
	            <img src="../../assets/icon_clean.png" v-show="passShow2" @click='isClean2' alt="">
	            <img class="rIcon" :src="passwordSrc2" alt="" @click='checkTpye'>
	        </div>
	         <div class="list">
	            <span>推荐码</span>
	            <input class="reCode"  type="text" maxlength="16" v-model='reCode' placeholder='请输入推荐码或者推荐人手机号' readonly="readonly" >
	            
	        </div>
	        <v-button buttonText='注册' :isActive='isActive' topNum='0.8rem' @toNext='confirm'></v-button>
   		</v-Content> 
	</div>
</template> 
<script>
import Button from '@/components/Button'
import Model from '@/components/Model'
import login from '@/api/login/index'
import { toast, isUserName, isPassWord } from '@/util/index'
import Content from '@/components/ContentBottom'
import { Header,Toast } from 'mint-ui'
export default {
    data() {
        return {
            userName:'',
            isuserName:false,
            password1: '',
            passShow1:false,
            ispassword1: true,
            passwordSrc1: require('../../assets/icon_hide_pwd.png'),
            password2:'',
            passShow2: false,
            ispassword2: true,
            reCode:"10063",
            passwordSrc2:require('../../assets/icon_hide_pwd.png'),
            flag:false,
        }
    },
    computed:{
        isActive(){
            if(this.userName&& isPassWord(this.password1) && isPassWord(this.password2) && this.password1==this.password2){
                return true
            }else{
                return false
            }
        }
    },
    components:{
        'v-button': Button,
        "mt-header":Header,
		"v-Content":Content,
		'v-Model':Model
    },
    methods:{
        isuserNameClean(){
            if(this.userName!=''){
                this.isuserName=true
            }else{
                this.isuserName=false
            }
        },
        back() {
			this.$router.back(-1)
		},
        cleanuserName(){
            this.userName='',
            this.isuserName=false
        },
        isCleanShow1(){
             if (this.password1 != '') {
				this.passShow1 = true
                return 
			} else {
				this.passShow1 = false
                return 
			}
        },
        isClean1(){
             if (this.password1 != '') {
				this.password1 = ''
				this.passShow1 = false
                return 
			}
        },
        checkTpye1(){
             this.ispassword1 = !this.ispassword1;
			if (!this.ispassword1) {
				this.passwordSrc1 = require('../../assets/icon_show_pwd.png')
			} else {
				this.passwordSrc1 = require('../../assets/icon_hide_pwd.png')
			}
        },
        isCleanShow2(){
			if (this.password2 != '') {
				this.passShow2 = true
                return 
			} else {
				this.passShow2 = false
                return 
			}
        },
        isClean2(){
			if (this.password2 != '') {
				this.password2 = ''
				this.passShow2 = false
                return 
			}
        },
        checkTpye(){
             this.ispassword2 = !this.ispassword2;
			if (!this.ispassword2) {
				this.passwordSrc2 = require('../../assets/icon_show_pwd.png')
			} else {
				this.passwordSrc2 = require('../../assets/icon_hide_pwd.png')
			}
        },
        confirm(){
            let encrypt = new JSEncrypt();
			encrypt.setPublicKey(this.$store.state.commonkey);
			if(this.userName==""){
				Toast("请先输入用户名!");
			}
			if( this.password1!=this.password2){
				Toast("两次输入的密码不一致");
			}
			
            if(this.isActive){
                let sendData={
                    userName:this.userName,
                    phone:this.$store.state.phone,
                    passWord:encrypt.encrypt(this.password1),
                    inviteCode:this.reCode,
                    openId:this.$route.query.openId,
		            imgUrl:this.$route.query.imgUrl,
		            plat:"mlj"
                    
                    
                }
                login.userRegister(sendData).then(data=>{
                    if(data.data.code==200){
                    	window.localStorage.setItem("phone", this.$store.state.phone);
                    	this.flag=true;//控制模态框
						setTimeout(() => {
						  this.login();
						}, 2000);
                    }else{
                        toast(data.data.message)
                    }
                })
            }
        },
        login() {
			
			let encrypt = new JSEncrypt();
			encrypt.setPublicKey(this.$store.state.commonkey);
			let senddata = {
				mobile: this.$store.state.phone,
				pwd: encrypt.encrypt(this.password1),
				plat:"mlj"
	            
			}
			if (true) {
				login.userLogin(senddata).then((data) => {
					if (data.data.code == 200) {
						//this.localStorage.setItem(this.mobile);
						 window.localStorage.setItem("phone",  this.$store.state.phone);
						this.$store.dispatch('saveToken',data.data.data.userId);
						console.log(this.$store.state.token);
						this.$router.push({ path: '/' })
					} else {
						toast(data.data.message)
					}
				})
			}
		}
    },
    mounted(){  
    	
    	if(this.$route.query.inviteCode){
    		/*this.reCode=this.$route.query.inviteCode;*/
    	}
    	if(this.$route.query.userName!=""){
    		this.userName=this.$route.query.userName;
    	}
    },
     beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	      next()
	  }
}
</script>
<style lang='less' scoped>
@import '../../less/config.less';
.wrap {
    height: 100%;
    background-color: @bgColor;
    padding-top:@p30;
}
.list {
    height: 1.1733rem;
    padding: 0 @p30;
    margin-bottom: 0.34667rem;
    position: relative;
    font-size: 0.42667rem;
    color: #fff;
    background-color: #141723;
    filter: alpha(opacity=70);
    -moz-opacity: 0.7;
    -khtml-opacity: 0.7;
    opacity: 0.7;
    span{
        display: inline-block;
        width: 1.8rem;
    }
    .cdspan{
       width: 2.5rem; 
       color: @actColor;
       right: @p30;
    }
    img {
        width: 0.42667rem;
        line-height: 1.1733rem;
        vertical-align: middle
    }
    .rIcon {
        position: absolute;
        right: @p30;
        top: 0.45rem;
        text-align: right;
    }
    input {
        padding-left: @p30;
        width: 5.7rem;
        color: #ffffff;
        line-height: .6rem;
        height: .6rem;
        margin-top: .25rem;
    }
    .reCode{
    	width: 6rem;
    }
    input::-webkit-input-placeholder {
        /* WebKit browsers*/
        color: @placeColor;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 4 to 18*/
        color: @placeColor;
    }
    input::-moz-placeholder {
        /* Mozilla Firefox 19+*/
        color: @placeColor;
    }
    input:-ms-input-placeholder {
        /* Internet Explorer 10+*/
        color: @placeColor;
    }
}
</style>

